<template>
<div class="config">
  <el-tabs v-model="activeName" @tab-click="handleClick" v-if="filterComplete">
    <el-tab-pane :label="item.label" :name="item.name" v-for="item in tabs">
    </el-tab-pane>
    <el-tab-pane :label="$t('configTabTitle.roleConfig')" name="roleConfig" v-if="isAdmin">
    </el-tab-pane>
    <el-tab-pane :label="$t('configTabTitle.ipRestrictions')" name="ipRestrictions" v-if="isAdmin">
    </el-tab-pane>
    <!-- <el-tab-pane :label="$t('configTabTitle.safetyProtection')" name="safetyProtection" v-if="isAdmin">
    </el-tab-pane> -->
    <!--<el-tab-pane label="老版通话配置" name="oldCallConfig" v-if="isAdmin">-->
    <!--</el-tab-pane>-->
  </el-tabs>
  <div  class="wapper">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
  <div class="config-bottom" v-if="isHaveMenu('show_simple_config') || isHaveMenu('default_show_simple_config')">
    <el-tooltip :content="$t('configTabTitle.tooltipContent')" placement="bottom" effect="dark">
      <span class="tip"><i class="iconfont icon-tixingweizhi"></i></span>
    </el-tooltip>
    <router-link to="/index/newConfig" class="config-bottom-a">
      <span @click="countSimple">{{$t('configTabTitle.toNewConfig')}}</span>
    </router-link>
  </div>
</div>
</template>
<script>
  import {isHasMenu} from '@/utils/m7Utils'
  import bus from '@/store/eventBus'
  import Vue from 'vue'
  export default {
    name: 'Config',
    data () {
      return {
        currentRoute: '',
        activeName: '',
        tabs: [
          {name: 'accountConfig', label: this.$t('configTabTitle.accountInfo'), id: 'company_identity'},
          {name: 'safetyConfig', label: this.$t('configTabTitle.safetyConfig'), id: 'account_config'},
          {name: 'channelConfig', label: this.$t('channelsettings.channelsettings'), id: 'config_channel'},
          {name: 'deptAndAgentConfig', label: this.$t('agentSetting.agentSetting'), id: 'dept_config'},
          {name: 'customerConfig', label: this.$t('configTabTitle.customerConfig'), id: 'customer_config'},
          {name: 'businessConfig', label: this.$t('configTabTitle.businessConfig'), id: 'task_config'},
          {name: 'qualityCheckConfig', label: this.$t('configTabTitle.qualityCheckConfig'), id: 'config_quality_check_template'},
          {name: 'intelligentQualityCheckConfig', label: this.$t('configTabTitle.intelligentQualityCheckConfig'), id: 'config_autoqc'},
          {name: 'aiRobotConfig', label: this.$t('configTabTitle.aiRobotConfig'), id: 'ai_robot_config'},
          {name: 'xbotRobotConfig', label: this.$t('configTabTitle.xbotRobotConfig'), id: 'ai_xbot_robot_config'},
          {name: 'riskConfig', label: this.$t('configTabTitle.riskConfig'), id: 'risk_config'},
          {name: 'questionnaireConfig', label: this.$t('configTabTitle.questionnaireConfig'), id: 'questionnaire_config_info'},
          {name: 'noticeConfig', label: this.$t('configTabTitle.noticeConfig'), id: 'system_notice', _id: 'show_system_notice'},
          {name: 'KnowledgeBaseLabel', label: this.$t('configTabTitle.KnowledgeBaseLabel'), id: 'func_km_tag'},
          {name: 'interfaceConfig', label: this.$t('configTabTitle.interfaceConfig'), id: 'config_interface'},
          {name: 'dicConfig', label: this.$t('configTabTitle.dicConfig'), id: 'dic_config'},
          // {name: 'ipRestrictions', label: this.$t('configTabTitle.ipRestrictions'), id: 'dic_config'},
          {name: 'operateLogManage', label: this.$t('configTabTitle.operateLogManage'), id: 'operate_log'},
          {name: 'thirdPartyConfig', label: this.$t('configTabTitle.thirdPartyConfig'), id: 'third_party_app_config'}
        ],
        filterComplete: false
      }
    },
    computed: {
      src () {
        return this.message
      },
      isAdmin () {
        return this.$store.state.session.user.isAdmin
      }
    },
    methods: {
      countSimple () {
        window._hmt && window._hmt.push(['_trackEvent', '其他统计', 'FE-去简单版设置'])
      },
      isHaveMenu (func) {
        return isHasMenu(func, this.$store.state.session.user)
      },
      handleClick (tab) {
        // 如果是继续点击自己模块路由不跳转
        if (this.$route.path.indexOf(tab.name) !== -1) return
        if (tab.name === 'aiRobotConfig') {
          this.openAI()
        } else if (tab.name === 'xbotRobotConfig') {
          bus.$emit('openXbotRobot')
        } else if (tab.name === 'riskConfig') {
          bus.$emit('openRiskBus')
        }
        this.$router.push({path: '/index/config/' + tab.name})
      },
      openAI () {
        this.$store.dispatch('m7AiRobotLogin', {}).then(res => {
          if (res.success) {
            let user = this.$store.state.session.user
            let account = user ? user.account : ''
            let url = document.location.protocol + res.url + '&Account=' + account
            bus.$emit('openNewAIUrl', url)
            window.open(url, '_blank')
          }
        })
      }
    },
    beforeMount () {
      // 获取PBX兼容信息
      this.$store.dispatch('getNewFeatures')
      // 获取是否开启小七机器人的配置
      this.$store.dispatch('queryRobotConfig', {}).then(res => {
        if (res.success) {
          if (res.is7mbot === true) {
            this.$store.state.isM7RobotOpen = true
            this.tabs.splice(8, 0, {name: 'robotConfig', label: this.$t('configLazyLoad.robotSeven.robotSeven'), id: 'robot_config'})
          }
        }
        this.tabs = this.tabs.filter((item) => {
          if (isHasMenu(item.id, this.$store.state.session.user)) {
            if (item._id) {
              if (isHasMenu(item._id, this.$store.state.session.user)) {
                return true
              }
            } else {
              return true
            }
          }
        })
        this.activeName = this.tabs[0].name
        this.filterComplete = true
        this.handleClick(this.tabs[0])
      })
    },
    beforeRouteLeave (to, from, next) {
      this.currentRoute = from.fullPath
      next()
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        if (to.query.active) {
          let query = to.query
          vm.activeName = query.active
          vm.$router.push({path: '/index/config/' + query.active, query: {active: query.subActive}})
        } else if (vm.currentRoute) {
          vm.$router.push({path: vm.currentRoute})
        }
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
.wapper
  background #fff
.config
  position relative
  .config-bottom
    position: absolute;
    top 11px
    right 14px
    .config-bottom-a
      background-color: #459ae9;
      color: #fff;
      border-radius: 4px;
      padding: 3px 7px;
    .tip
      color #3a87ad
      display inline-block
      height 16px
      width 16px
      text-align center
      line-height 16px
      margin 0 12px
      position relative
      font-size 10px
      .iconfont
        font-size 10px
        color $c-main
      .icon-tixingweizhi
        border 1px solid $c-main
        border-radius 50%
        display inline-block
        height 16px
        width 16px
        text-align center
        line-height 16px
        position relative
        top -1px
        font-size 10px
</style>
